<template>
  <div class="main-aside">
    <div class="aside-add">
      <el-button type="success" size="mini" @click="btnHandle()">{{topText}}</el-button>
    </div>
    <div class="aside-list scroll-class">
      <div class="aside-item" v-for="(item, index) in data" :key="index" :class="{'aside-item-active': active == index}" @click="select(item, index)" :title="item.name">
        <div class="item-name hidden-text-1">{{item.name}}</div>
        <div class="item-handle">
          <i class="el-icon-edit" title="编辑" @click="handle('edit', item)"/>
          <i class="el-icon-delete" title="删除" @click.stop="handle('delete', item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default: () => [],
      type: Array
    },
    topText: {
      default: '',
      type: String
    },
    topType: {
      default: '',
      type: String
    },
  },
  data () {
    return {
      active: 0
    }
  },

  components: {},

  computed: {},

  methods: {
    select(item, index) {
      this.active = index
      this.$emit('select', {item, index})
    },
    btnHandle() {
      this.$emit('btnHandle', this.topType)
    },
    handle(type, item) {
      this.$emit('handle', {type, item})
    }
  }
}

</script>
<style lang='scss' scoped>
.main-aside{
  position: relative;
  height: 100%;
  width: 200px;
  border-right: 1px solid #ccc;
  .aside-add{
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #fff;
    top: 0;
    left: 0px;
    z-index: 5;
  }
  .aside-list{
    padding-top: 50px;
    box-sizing: border-box;
    height: calc(100%);
    overflow: scroll;
  }
  .aside-item{
    width: 180px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
    .item-name{
      width: 70%;
    }
    .item-handle{
      width: 30%;
      opacity: 0;
      transition: all .5s;
      display: flex;
      justify-content: flex-end;
      i{
        padding: 5px;
      }
    }
  }
  .aside-item:hover{
    .item-handle{
      opacity: 1;
    }
  }
  .aside-item-active{
    background-color: #eee;
    position: relative;
    color: #0095ff;
    transition: all .5s;
  }
}
</style>
